<!--
* @description 警情订阅
* @author zywu
* @date 2021/11/09 16:20:33
!-->
<template>
  <div class="page-choose-fbs">
    <div class="head d-flex ai-center">
      <div class="cancel" @click="handleCancel">取消</div>
      <div class="title flex-1 text-center">选择建筑物</div>
      <div class="confirm" @click="handleSave">确定</div>
    </div>
    <div class="content">
      <treeselect
        ref="treeSelect"
        class="my-treeselect"
        v-model="value"
        :multiple="true"
        :options="options"
        alwaysOpen
        :default-expand-level="1"
        value-consists-of="ALL"
      >
        <div slot="option-label" slot-scope="{ node }">{{ node.raw.text }}</div>
      </treeselect>
    </div>
  </div>
</template>

<script>
import { getUserRelateFbsTree } from '@/api/common'
import { mapState } from 'vuex'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
const f7Component =
  window.top.app.view.current.el.f7View.router.currentPageEl.f7Component
export default {
  components: { Treeselect },

  data() {
    return {
      value: [],
      options: [],
    }
  },

  computed: {
    ...mapState(['userInfo']),
  },

  created() {
    this.getUserRelateFbsTree()
    this.value = f7Component.relateBuildIds
      ? f7Component.relateBuildIds.split(',').map((n) => {
          return parseInt(n)
        })
      : []
  },

  mounted() {},

  methods: {
    handleSave() {
      try {
        let valueInstance=this.$refs.treeSelect.getValueContainer().instance
        let texts=valueInstance.internalValue.map(valueInstance.getNode).map(n=>{
          return n.raw.text
        })
        f7Component.onChooseFbs(this.value.join(','),texts.join(','))
      } catch (error) {}
    },
    getUserRelateFbsTree() {
      getUserRelateFbsTree({
        orgIds: f7Component.historyOrgId,
        account:this.userInfo.accountName,
        buildId: 0,
      }).then((res) => {
        let list = res.data
        this.formatData(list)
        this.options = list
      })
    },
    formatData(data) {
      data.forEach((n) => {
        if (n.nodes) {
          n.children = [].concat(n.nodes)
          delete n.nodes
          this.formatData(n.children)
        }
      })
    },
    handleCancel() {
      try {
        f7Component.fbsPopup.close()
      } catch (e) {}
    },
  },
}
</script>
<style lang='scss'>
.page-choose-fbs {
  .head {
    background: #fff;
    border-bottom: 1px solid rgba(225, 225, 225, 0.5);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  .cancel,
  .confirm {
    padding: 10px;
    color: #2196f3;
  }
  .cancel {
    margin-left: 5px;
  }
  .confirm {
    margin-right: 5px;
  }
  .title {
    font-size: 16px;
    color: #333;
  }
  .content {
    padding: 5px 5px 0;
    height: calc(100vh - 53px);
    overflow-y: auto;
  }
}
</style>